<template>
	<div class="tx-system">
		<div class="img-box" v-for="(item,index) in num" :key="index">
			<img src="../../assets/person/selecttx.png" alt="" @click="systemImg(index,$event)" 
				:class="{'selected': preImg === index }"/>
		</div>
	</div>
</template>

<script>
	export default {
		data () {
			return {
				num: 21,
				preImg: null
			}
		},
		methods: {
			// 选中图片点击事件
			systemImg (index,e) {
				var eve = e || window.event
				var imgSrc = eve.target.getAttribute('src')
				var imgUrl = imgSrc
				this.$emit("txsystem",imgUrl)
				this.preImg = index
			}
		}
	}
</script>

<style scoped>
.tx-system {
	overflow: hidden;
	margin: 0 40px;
}
.img-box {
	float: left;
	width: 50px;
	height: 50px;
	margin: 0 10px 30px;
}
.img-box img {
	width: 50px;
	height: 50px;
}
.img-box img:hover {
	cursor: pointer;
}
.img-box .selected {
	border: 1px solid #196175;
	border-radius: 50%;
}
</style>